<template>
  <div class="zong">

    
    <br />
      用户名：<br />
      <input
        type="text"
        placeholder="用户名："
        name="text"
        class="input"
      /><br />
      原密码：<br />
      <input
        type="password"
        placeholder="原密码："
        name="text"
        class="input"
      /><br />
      新密码：<br />
      <input
        type="password"
        placeholder="新密码："
        name="text"
        class="input"
      /><br />
      年龄：
      <input
        type="text"
        placeholder="年龄："
        name="text"
        class="input"
      /><br />
      性别：
      <input
        type="text"
        placeholder="性别："
        name="text"
        class="input"
      />
      <br>

      电话号码：
      <input
        type="text"
        placeholder="电话号码："
        name="text"
        class="input"
      /><br />
      <br /><button>
        <span class="button_top"> 提 交 </span>
      </button>
    </div>

</template>

<script>
export default {};
</script>

<style>
.zong {
  /* border: 3px solid #51dde2; */
  display: flex;
  flex-direction: column;
  /* 确保左侧边框和子元素有10px距离，通常是通过padding或margin实现 */
 
  margin: 0 auto;
  width: 70%;
  
  /* border-radius: 10px; 添加圆角 */
  size:28px;
}

/* 输入框样式 */
.input {
  margin-top: 10px;

  border-radius: 10px;
  outline: 2px solid #febf00;
  border: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background-color: #e2e2e2;
  outline-offset: 3px;
  padding: 10px 1rem;
  transition: 0.25s;
  width: 500px;
}

.input:focus {
  outline-offset: 5px;
  background-color: #fff;
}

/* 按钮样式 */
button {
  /* Variables */
  --button_radius: 0.75em;
  --button_color: #e8e8e8;
  --button_outline_color: #000000;
  font-size: 17px;
  font-weight: bold;
  border: none;
  border-radius: var(--button_radius);
  background: var(--button_outline_color);
}

.button_top {
  display: block;
  box-sizing: border-box;
  border: 2px solid var(--button_outline_color);
  border-radius: var(--button_radius);
  padding: 0.75em 1.5em;
  background: var(--button_color);
  color: var(--button_outline_color);
  transform: translateY(-0.2em);
  transition: transform 0.1s ease;
}

button:hover .button_top {
  /* Pull the button upwards when hovered */
  transform: translateY(-0.33em);
}

button:active .button_top {
  /* Push the button downwards when pressed */
  transform: translateY(0);
}
</style>